<script setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import { getAccounts, modAccount } from "@/api/user";

// import Avatar from "@/components/Avantar.vue";
import { useUserStore } from "@/stores/counter";
const userStore = useUserStore();
const userMsg = userStore.userMsg;

// do not use same name with ref
const form = reactive({
  username: "",
  tel: null,
  token: userStore.userMsg.token,
  // oldPassword:null,
  // newPassword:null,
  // avatar:null
});

(async function () {
  getAccounts(userMsg.token, userMsg.accountId).then(res => {
    console.log(res.data.data[0]);
    form.tel = res.data.data[0].tel;
    form.username = res.data.data[0].username;
    form.avatar = res.data.data[0].avatar;
    imageUrl.value = res.data.data[0].avatar;


      userStore.change_userMsg({
          avatar: res.data.data[0].avatar
        })

  });
})();

const circleUrl =
  "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png";
const onSubmit = () => {
  modAccount(form).then(res => {
    console.log(res.data);
    if (res.data.code === 1) {
      ElMessage.success({
        message: "修改成功",
      });
    } else {
      ElMessage.error({
        message: res.data.msg,
      });
    }
  });
};

const imageUrl = ref("");

const handleAvatarSuccess = (response, uploadFile) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw);

  form.avatar = response.url

  userStore.change_userMsg({
    avatar: response.url
  })
};

const beforeAvatarUpload = rawFile => {
  console.log(rawFile);
  if (rawFile.type !== "image/jpeg") {
    ElMessage.error("局只能上传jpg格式的头像!");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("头像不能超过 2MB!");
    return false;
  }
  return true;
};

//! 老师的
//   修改头像地址
const avatarUrl = ref("http://127.0.0.1:3000/avatar");
//   修改头像时，要发送的其他数据
</script>
<template>
  <!-- {{ form }} -->
  <el-form :model="form" label-width="120px">
    <el-row>
      <el-col :span="8" :push="2" class="ava oldAva">
        <el-avatar :size="50" :src="form.avatar" class="avaImg">
          {{ form.username }}
        </el-avatar>
        <!-- <input type="file" name="file" id="file"> -->
        <el-upload
          class="avatar-uploader newAva"
          :action="avatarUrl"
          :auto-upload="true"
          list-type="picture-card"
          method="post"

          :multiple="true"
          :data="{ token: userMsg.token }"
          :show-file-list="false"
          name="file"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
        <!-- <Avatar ></Avatar> -->
      </el-col>

      <el-col :span="8">
        <el-form-item label="用户名">
          <el-input v-model="form.username" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="form.tel" />
        </el-form-item>
        <el-form-item label="旧密码">
          <el-input
            v-model="form.oldPassword"
            placeholder="请输入老密码"
            type="password" />
        </el-form-item>
        <el-form-item label="新密码">
          <el-input
            v-model="form.newPassword"
            placeholder="请输入新密码"
            type="password" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">修改</el-button>
          <el-button @click="$router.push('/')">返回</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  text-align: center;
}
.ava {
  display: flex;
  /* background-color: aquamarine; */
  align-items: center;
  justify-content: center;
}
.ava .avaImg {
  width: 100px;
  height: 100px;
  margin-right: 30px;
}
</style>
